<!-- 订单 -->
<template>
	<view class="orderForm">
		<Tabs @swiperChange="swiperChange" ref="tabs" keyName="name" @change="change" @scrolltolower="scrolltolower" :swiperCurrent="swiperCurrent"
			:list="tabsData">
			<template v-slot:nav>
				<view class="orderForm_nav">
					<view style="padding: 0 60rpx;">
						<u-search @change="changeValue" placeholder="输入订单号、设备名称、商品名称" v-model="keyword"
							:showAction="false" @search="search"></u-search>
					</view>
				</view>
			</template>

			<orderList :type="type" :loadStatus="loadStatus" :slot="swiperCurrent+'tabs'" @scrolltolower="scrolltolower"
				:list="list"></orderList>
		</Tabs>
		<c-tabbar v-if="!type" @change="changeTabbar" />
	</view>
</template>

<script>
	import Tabs from '@/components/tabs.vue'
	import order from '@/api2/order.js';
	import orderList from './components/orderList.vue';
	import { getOrderListApi } from '@/api/my.js'
	export default {
		components: {
			Tabs,
			orderList
		},
		data() {
			return {
				page: 1,
				loadStatus: '',
				tabsData: [{
						name: '全部',
						value: 0
					},
					{
						name: '排队中',
						value: 1
					},
					{
						name: '进行中',
						value: 2
					},
					{
						name: '已完成',
						value: 3
					}
				],

				keyword: '',
				list: [],
				device_no: '',
				swiperCurrent: 0,
				type: null
			}
		},
		onLoad(op) {
			if(op.type) {
				this.type = op.type
			}
			this.getOrderList()
		},
		methods: {
			changeTabbar(e){
				if(e.id === 0){
					return uni.navigateBack()
				}
				if(!e.pagePath) return
				uni.reLaunch({
					url: e.pagePath
				})
			},
			onRelaunck() {
				uni.showToast({
					title: '请登录！',
					icon: 'none',	
					duration: 2000
				})
			},
			changeValue(e) {
				if (!e) {
					this.resetting()
					this.getOrderList()
				}
			},
			scrolltolower() {
				if (this.loadStatus == 'nomore') return
				this.getOrderList()
			},
			skip(url) {
				uni.navigateTo({
					url: url
				})
			},
			moreStatus(status) {
				this.loadStatus = status
			},
			resetting() {
				this.show = false
				this.list = []
				this.page = 1
			},
			async getOrderList() {
				this.moreStatus('loading')
				let obj = {
					status: this.tabsData[this.swiperCurrent].value, //1-排队；2-进行中；3-已结束。
					page_size: 10,
					page: this.page,
					keyword: this.keyword
				}
				if(!obj.status) delete obj.status
				let res
				if(this.type) {
					res = await getOrderListApi(obj)
				}else {
					res = await order.getOrderList(obj)
				}
				
				
				this.list = [...this.list, ...res.data]
				uni.hideLoading()
				if (res.data.length < 10) return this.moreStatus('nomore')
				if (res.data.total <= 10) {
					this.loadStatus = 'nomore'
				} else {
					this.moreStatus(res.data.length !== 0 ? 'loadmore' : 'nomore')
				}
				if (res.data.length === 0) return false
				this.page += 1 // 当前页加1
			},
			search(v) {
				this.resetting()
				this.getOrderList()
			},
			swiperChange(i) {
				this.swiperCurrent = i
				this.resetting()
				this.getOrderList()
			},
			change(i) {
				this.swiperCurrent = i
			}
		}

	}
</script>
<style>
	page {
		background: #F2F2F2;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.orderForm {
		height: calc(100% - 150rpx);

		// 头部
		&_nav {
			background-color: #fff;
			box-sizing: border-box;
			padding-top: 20rpx;
			padding-bottom: 10rpx;

			// 标签
			&>view:nth-child(2) {
				display: flex;
				margin-top: 30rpx;

				&>view {
					.tabs1 {
						font-size: 30rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}

					.tabs2 {
						font-size: 30rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FCB527;
					}

					view {
						width: 60rpx;
						height: 4rpx;
						background: #FCB527;
						margin-top: 8rpx;
					}
				}

				&>view:first-child {
					margin-left: 60rpx;
				}

				&>view:not(:last-child) {
					margin-right: 60rpx;
				}
			}
		}

		.u-wrap {
			height: calc(100%);
			/* #ifdef H5 */
			// height: calc(100% - var(--window-top));
			/* #endif */
			display: flex;
			flex-direction: column;

			.u-menu-wrap {
				flex: 1;
				display: flex;
				overflow: hidden;
				padding-top: 20rpx;
			}

			.u-tab-view {
				width: 160rpx;
			}

			.u-tab-item {
				width: 160rpx;
				height: 66rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #444;
				line-height: 1;
				font-weight: 500;
				color: #333333;
				width: 100%;
				line-height: 66rpx;
				padding-left: 20rpx;

				&:not(:last-child) {
					margin-bottom: 20rpx;
				}
			}

			.u-tab-item-active {
				position: relative;
				border-left: 6rpx solid #FCB527;
				color: #FCB527;
				background: #F9F9F9;
			}

			.u-tab-item-active::before {
				content: "";
				position: absolute;
				height: 32rpx;
				left: 0;
				top: 39rpx;
			}

			.u-tab-view {
				height: 100%;
			}

			.description {
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>